/**
  @author: liump
  @date: 2019年4月29日10:45:51
  @module: 只读地图公共组件
  @option: 
    1.地图只读,根据接口数据渲染页面
  @params:
    proId: 当前项目编号
    workAMapData: 接口返回的数据
  @data:
    {
        details: [
          {
            at_point: 1, // 工作点，垂直作业使用
            end_point: 2, // 结束点，水平作业使用
            start_point: 1, // 起始点, 水平作业使用
            work_direction: 1, // 工作方向 0.水平 1.垂直
            work_length: "11", // 工作长度
            work_option: "1", "string", // 工作选项id
            work_message: "", // work_option 对应的所有工作内容明细
            work_type: 1, // 1.管道 2.线路 3.设备 4.溶纤 5.跳纤
            workload: 1 // workload (integer, optional): 重复次数
          }
        ],
        points: [
          { point_code: 1, prev_point_code: 0, lng: 113.742975, lat: 23.045348, distance: 0 },
          { point_code: 2, prev_point_code: 1, lng: 113.742782, lat: 23.043314, distance: 227.29 },
          { point_code: 3, prev_point_code: 2, lng: 113.74291, lat: 23.040668, distance: 294.84 },
          { point_code: 4, prev_point_code: 2, lng: 113.745528, lat: 23.043196, distance: 281.6 },
          { point_code: 5, prev_point_code: 4, lng: 113.745764, lat: 23.04053, distance: 297.76 }
        ],
        pro_id: "00001",
        pro_lnglat: []
      }
    }
 */
<template>
  <div class="read-only-amap">
    <!-- 地图容器 Start -->
    <div class="amap">
      <div id="read-only-amap"></div>
      <el-button class="btn" type="primary" @click="handleGetAmapCenter">定位到项目绘图</el-button>
    </div>
    <!-- 地图容器 End  -->
  </div>
</template>

<script>
import AMap from 'AMap' //在使用地图的页面引入该组件
export default {
  name: 'readOnlyAmap',
  props: {
    readOnlyAmapData: Object
  },
  data() {
    return {
      amap: null, // 地图初始化
      path: [], // 线段集合,每2点画一条线并清空
      polyline: null, // 折现对象初始化
      markers: [] // marker 对象集合,用于存储 marker,在获取线段中心点的时候需要获取 marker 对象
    }
  },
  methods: {
    /**
     * 挂载调用总方法
     */
    amapInit() {
      // 初始化地图
      this.handleAMapInit()

      // 调用地图工具库
      this.handleAMapPlugin()

      // 绘图(这里的参数应该是接口接到数据后父组件传过来的值)
      this.handleShowLine(this.readOnlyAmapData.points)

      // 通过自适应覆盖物地图跳转到指定位置
      this.handleGetAmapCenter()
    },
    /**
     * AMap 地图初始化方法
     */
    handleAMapInit() {
      this.amap = new AMap.Map('read-only-amap', {
        resizeEnable: true,
        expandZoomRange: true,
        zoom: 18,
        zooms: [3, 20],
        // center: this.readOnlyAmapData.pro_lnglat
      })
      // 挂载卫星地图图层(显示楼/绿化/路)
      let satelliteLayer = new AMap.TileLayer.Satellite()
      this.amap.add(satelliteLayer)
    },
    /**
     * 该方法调用了 AMap 地图工具库,缩放标尺,位移圆钮,定位
     */
    handleAMapPlugin() {
      // 调用地图工具库
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
        // 调用地图工具,缩放标尺,位移圆钮
        this.amap.addControl(new AMap.ToolBar())
        this.amap.addControl(new AMap.Scale())
      })
    },
    /**
     * 该方法通过传递过来的数据渲染页面
     */
    handleShowLine(data) {
      // 根据传递过来的数据渲染页面
      // 对数组遍历,需要注意:
      // 1. 第一个点为起始点
      // 2. 每2个点绘制一个线段
      for (let i = 0; i < data.length; i++) {
        let el = data[i]
        let lnglat = [el.lng, el.lat]
        let tag = el.tag
        let pointType = el.pointType
        this.handleAddMarker(lnglat, el.point_code, el.distance, tag, pointType)
      }

      this.handleAddLine(data)
    },
    /**
     * 该方法是添加地图点标记函数,在点标记上点击右键可以开始绘制新的分支路线
     * @param lnglats 该参数是经纬度数组,例如 [lng, lat]
     * @param point_code 该参数是节点编号
     * @param distance 2个点之间的距离
     */
    handleAddMarker(lnglats, point_code = 0, dt = 0, tag, pointType) {
      // 测距信息窗
      var content = `<div class='marker-read-only-amap'>`

      switch (pointType) {
        case 'D-OGJ':
          content += `<img src='/static/amap/d_ogj.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-NGJ':
          content += `<img src='/static/amap/d_ngj.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-OGF':
          content += `<img src='/static/amap/d_ogf.png'>`
          content += `<div>${tag}</div>`
          break
        case 'D-NGF':
          content += `<img src='/static/amap/d_ngf.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-JTH':
          content += `<img src='/static/amap/w_njth.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-YS':
          content += `<img src='/static/amap/w_ys.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-YX':
          content += `<img src='/static/amap/w_yx.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-NQBJG':
          content += `<img src='/static/amap/w_nqbjg.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-OQBJG':
          content += `<img src='/static/amap/w_oqbjg.png'>`
          content += `<div>${tag}</div>`
          break
        case 'W-PN':
          content += `<img src='/static/amap/w_pn.png'>`
          break
        default:
          content += `<img src='/static/amap/point.png'>`
          break
      }
      content += `</div>`

      this.marker = new AMap.Marker({
        position: lnglats,
        offset: new AMap.Pixel(-15, -15),
        content: content
      })
      // 存储 marker
      this.markers.push(this.marker)
      // 设置多个点标记
      this.marker.setMap(this.amap)
    },
    /**
     * 该方法是绘线的方法,但是划线必须一条一条划线
     */
    handleAddLine(data) {
      // 遍历数据,将2个节点之间取经纬度并绘线.
      for (let i = 0; i < data.length; i++) {
        var el = data[i]
        // 找到当前节点及上一个节点的经纬度
        var node = el.point_code // 当前节点编号
        var prevNode = el.prev_point_code // 上一个节点编号
        var nodeLnglat = [el.lng, el.lat] // 当前节点经纬度
        var distance = el.distance // 当前节点和上一个节点的距离
        var prevLnglat // 上一个节点经纬度
        if (prevNode == 0) {
          continue
        }
        for (let index = 0; index < data.length; index++) {
          var elem = data[index]
          if (elem.point_code === prevNode) {
            prevLnglat = [elem.lng, elem.lat]
          }
        }
        this.path.push(nodeLnglat, prevLnglat)
        this.polyline = new AMap.Polyline({
          path: this.path,
          strokeColor: '#1abc9c', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        })
        // 通过当前节点和上一个节点的经纬度获取对应的 marker 对象,对象从 markers 中取
        // 第一个 marker,通过 prevLnglat -- 上一个节点经纬度获取 marker对象
        let p1
        this.markers.forEach((el, p_index) => {
          let prev_lnglat = el.getPosition()
          if (
            prev_lnglat.lng == prevLnglat[0] &&
            prev_lnglat.lat == prevLnglat[1]
          ) {
            p1 = this.markers[p_index].getPosition()
          }
        })
        // 第二个 marker
        let p2 = this.markers[i].getPosition()
        // 计算测距信息框中心点位置
        let textPos = p1.divideBy(2).add(p2.divideBy(2))
        let text = new AMap.Text({
          text: distance + '米',
          position: textPos,
          map: this.amap,
          style: {
            'background-color': '#1abc9c',
            'border-color': '#e1f5fe',
            color: '#fff',
            'font-size': '12px'
          }
        })
        // 将折线添加至地图实例
        this.amap.add(this.polyline)
        this.path = []
      }
    },
    /**
     * 通过覆盖物地图自适应显示
     * @method handleGetAmapCenter
     * @author liump
     */
    handleGetAmapCenter(){
      this.amap.setFitView()
    }
  },
  mounted() {
    this.amapInit()
  }
}
</script>

<style scoped>
/* 建项审批列表最外层容器 read-only-amap Start*/
.read-only-amap {
  widows: 100%;
}
/* 建项审批列表最外层容器 read-only-amap End and 地图容器 Start */
.amap {
  width: 100%;
  height: 500px;
  position: relative;
}
#read-only-amap {
  position: absolute;
  width: 100%;
  height: 100%;
}
.btn{
  position: absolute;
  z-index: 100;
  bottom: 20px;
  right: 20px;
}
/* 数据展示列表 End */
</style>

<!-- 在全局中修改地图的css -->
<style>
.read-only-amap .marker-read-only-amap {
  position: relative;
  width: 30px;
  height: 30px;
}
.read-only-amap .marker-read-only-amap img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.read-only-amap .marker-read-only-amap div:nth-child(2) {
  height: 20px;
  padding: 3px 6px;
  position: absolute;
  color: #ff0036;
  left: -10px;
  top: -26px;
}
.read-only-amap .marker-read-only-amap div:nth-child(3) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  position: absolute;
  color: #ff0036;
  left: 6px;
  top: 6px;
}
</style>